<!-- 选择城市 -->
<template>
    <el-select ref="selectRef" v-model="param.selectCountryId" :remote-method="getCountryList" :multiple="config.multiple" :loading="param.loading" clearable filterable remote 
    :disabled="config.disabled" :collapse-tags="config.collapsetags" @change="countryDataChange" placeholder="请输入国家" style="width:100%">
        <template v-if="config.isIcon" #prefix><el-icon><MapLocation /></el-icon></template>
        <el-option v-for="(item,index) in param.cityOptions" :key="index" :label="item.countryName" :value="item.countryId"/>
    </el-select>
</template>

<script lang="ts" setup>
import {reactive, ref, watch, onMounted} from 'vue'
import { getCountry } from '@/api/system/city'; // 引入城市接口

const emit = defineEmits(['countryId'])

const props = defineProps({
    config: {
        type: Object,
        default: () => {}
    },
    selectCountryId:{ // 当前选中的城市id
        type: String,
        default: ''
    },
    index:{ // 当前修改数据行的下标
        type:Number,
        default: 0
    }
    
})

// onActivated(() => {
//     console.log("onActivated",props.selectCountryId);
// })
onMounted(() => {
    const countryListInfo = localStorage.getItem('countryList')
    if(props.selectCountryId && countryListInfo){
        param.cityOptions = JSON.parse(countryListInfo)
    }
})
// 获取城市列表
const selectRef = ref()
const param = reactive({
  loading: false,
  cityOptions: [],
  selectCountryId: props.selectCountryId
})


// 监听更新param.selectCountryId
watch(() => props.selectCountryId, (val: any) => {
    const countryListInfo = localStorage.getItem('countryList')
    param.cityOptions = JSON.parse(countryListInfo)
    param.selectCountryId = val
}, { deep: true })
const getCountryList = async (query: string) => {
    if (!query) return 
    param.loading = true
    let reqParam ={countryName: query} 
    getCountry(JSON.stringify(reqParam)).then((res: any) => {
        param.cityOptions = res.data
        param.loading = false
    })
}

const countryDataChange = (select: any) => {
    // let infos = param.cityOptions.filter((item: any) => item.id === select)
    emit('countryId',select,props.index)
}

</script>
<style lang="scss" scoped></style>